<!DOCTYPE html>
<html>
    <head>
        <title>登录</title>
        <meta charset="utf-8">
        <link rel="stylesheet/less" type="text/css" href="{ms:global.host/}/{ms:global.style/}/less/login.less">
        <link rel="stylesheet/less" type="text/css" href="{ms:global.host/}/{ms:global.style/}/less/base.less">
				<script src="http://cdn.mingsoft.net/plugins/jquery/1.9.1/jquery-1.9.1.js"></script>
        <script src="http://cdn.mingsoft.net/plugins/vue/2.3.3/vue.min.js"></script>
        <script src="http://cdn.mingsoft.net/plugins/validator/5.5.0/validator.min.js"></script>
        <script src="http://cdn.mingsoft.net/plugins/less/2.5.3/less.min.js"></script>
    </head>
    <body>
        <div id="login">
            <div class="ms-head">
                <a href="{ms:global.host/}"><img src="{ms:global.host/}/{ms:global.style/}/images/logo.png" /></a>
                <span class="ms-head-line"></span>
                <span class="ms-head-welcome-login">欢迎登录</span>
            </div>
            <div class="ms-content">
                <div class="ms-content-form" :class="{'ms-none':show == 'weixin'}">
                    <div class="ms-login-title">
                        <span class="ms-login-chinese-title">账号登录 /</span>
                        <span class="ms-login-english-title">User login</span>
                    </div>
                    <div class="ms-login-error-text">
                        <img src="{ms:global.host/}/{ms:global.style/}/images/error.png" style="display: none;" v-show="errorText != ''" />
                        <span v-text="errorText" v-show="errorText != ''"></span>
                    </div>
                    <form id="ms-login-form">
                        <input @keyup="chanageBackgroundColor" maxlength="20" @keyup.enter="login" type="text" class="ms-login-people-name" :class="{'ms-error':error == 'peopleName'}" name="peopleName" v-model="peopleName" placeholder="必填，6-20个字符" @blur="checkPeopleName" />
                        <input @keyup="chanageBackgroundColor" maxlength="20" @keyup.enter="login" type="password" class="ms-login-people-name" :class="{'ms-error':error == 'peoplePassword'}" name="peoplePassword" v-model="peoplePassword" placeholder="必填，6-20个字符" @blur="checkPeoplePassword" />
                        <div class="login-code">
                            <input @keyup="chanageBackgroundColor" maxlength="4" @keyup.enter="login" type="text" class="login-code-input ms-login-float" name="rand_code" placeholder="必填，4个字符" v-model="peopleCode" :class="{'ms-error':error == 'peopleCode'}" @blur="checkPeopleCode" />
                            <img src="{ms:global.host/}/{ms:global.style/}/images/code.jpg" class="login-code-img ms-login-float" @click="code">
                            <p class="ms-login-float login-code-text">
                                <span class="login-code-rompt">看不清?</span>
                                <br/>
                                <spna class="login-code-change" @click="code">换一张</span>
                            </p>
                        </div>
                        <div class="ms-login-button" @click="login" :disabled="butState != '登录'" :class="{'ms-but-disabled':butState != '登录'}" v-text="butState"></div>
                    </form>
                </div>
            </div>
            <div class="ms-footer">
                <p>
                    <span>
                        <a href='{ms:global.url/}/53/index.html'>关于我们</a>
                    </span>
                    <span>|</span>
                    <span>
                        <a target="_blank" href='http://mingsoft.net/html/1//5527/index.html#faz'>发展历程</a>
                    </span>
                    <span>|</span>
                    <span>
                        <a target="_blank" href='{ms:global.url/}/19/index.html'>联系我们</a>
                    </span>
                </p>
                <p>版权所有 @铭飞科技有限公司2012-2018保留一切权利</p>
            </div>
        </div>
    </body>
    <script>
        var loginVue = new Vue({
            el: '#login',
            data: {
                show: "form", //切换显示的内容
                errorText: "", //错误提示
                error: "", //输入框错误的显示
                peopleName: "", //用户名输入框
                peoplePassword: "", //密码输入框
                peopleCode:"",//验证码输入框
                butState: "登录", //按钮文字
            },
            watch: {
                peopleName: function() {
                    var pattern = /[^\w\u4E00-\u9FA5]/ig;
                    if(!validator.isNull(this.peopleName) && this.peopleName.indexOf(" ") < 0 && validator.isLength(this.peopleName, {
                            min: 6,
                            max: 20
                        }) && pattern.test(this.peopleName) == false && this.error == 'peopleName') {
                        this.errorText = "";
                        this.error = "";
                    }
                },
                peoplePassword: function() {
                    if(!validator.isNull(this.peoplePassword) && this.peoplePassword.indexOf(" ") < 0 && validator.isLength(this.peoplePassword, {
                            min: 6,
                            max: 20
                        }) && this.error == 'peoplePassword') {
                        this.errorText = "";
                        this.error = "";
                    }
                },
                peopleCode: function() {
                    if(!validator.isNull(this.peopleCode) && this.peopleCode.indexOf(" ") < 0 && this.peopleCode != 4 && this.error == 'peopleCode') {
                        this.errorText = "";
                        this.error = "";
                    }
                },
            },
            methods: {
                errorShow: function(msg, type) {
                    this.errorText = msg;
                    this.error = type;
                },
                //判断用户名
                checkPeopleName: function() {
                    var pattern = /[^\w\u4E00-\u9FA5]/ig;
                    if(validator.isNull(this.peopleName)) {
                        this.errorShow("用户名不能为空", 'peopleName');
                        return false;
                    } else if(this.peopleName.indexOf(" ") >= 0) {
                        this.errorShow("用户名不能包含空格", 'peopleName');
                        return false;
                    } else if(!validator.isLength(this.peopleName, {
                            min: 6,
                            max: 20
                        })) {
                        this.errorShow("用户名为6~20个字符", 'peopleName');
                        return false;
                    } else if(pattern.test(this.peopleName)) {
                        this.errorShow("用户名不能包含特殊字符", 'peopleName');
                        return false;
                    }
                    return true;
                },
                //判断密码
                checkPeoplePassword: function() {
                    if(validator.isNull(this.peoplePassword)) {
                        this.errorShow("密码不能为空", 'peoplePassword');
                        return false;
                    } else if(!validator.isLength(this.peoplePassword, {
                            min: 6,
                            max: 20
                        })) {
                        this.errorShow("密码长度在6~20位之间!", 'peoplePassword');
                        return;
                    } else if(this.peoplePassword.indexOf(" ") >= 0) {
                        this.errorShow("密码是不能包含空格", 'peoplePassword');
                        return false;
                    }
                    return true;
                },
                 //判断验证码
                checkPeopleCode: function() {
                    if(validator.isNull(this.peopleCode)) {
                        this.errorShow("验证码不能为空", 'peopleCode');
                        return false;
                    } else if(this.peopleCode.length != 4) {
                        this.errorShow("验证码为4位字符", 'peopleCode');
                        return false;
                    } else if(this.peopleCode.indexOf(" ") >= 0) {
                        this.errorShow("验证码不能包括空格", 'peopleCode');
                        return false;
                    }
                    return true;
                },
                //登录
                login: function() {
                    var target = this;
                    if(this.checkPeoplePassword() && this.checkPeopleName() && this.checkPeopleCode) {
                   			target.butState = '登录中...';
                        $.ajax({
                            type: "post",
                            data: $("#ms-login-form").serialize(),
                            url: "{ms:global.host/}/checkLogin.do",
                            success: function(msg) {
                                if(msg.result != true) {
                                    alert(msg.resultMsg);
                                    target.code();
                                } else {
                                    $("body").append("<form action='{ms:global.host/}/people/center.do' id='goForm'></form>");
                                    $("#goForm").submit();
                                }
                                target.butState = '登录';
                            }
                        })
                    }
                },
                code: function() {
                    $(".login-code-img").attr("src", "{ms:global.host/}/code?t=" + (new Date).getTime())
                },
                chanageBackgroundColor: function(){
                    if($('input[name="peopleName"]').val().length >= 6 &&　$('input[name="peoplePassword"]').val().length >= 6 && $('input[name="rand_code"]').val().length == 4){
                      	$('.ms-login-button').css("background-color", "#009aff");
                        $('.ms-login-button').css("pointer-events", 'visible');
                        $('.ms-login-button').css("color", "#fff");
                    }else{
                      	$('.ms-login-button').css("background-color", "#fafafa");
                        $('.ms-login-button').css('pointer-events', "none");
                        $('.ms-login-button').css("color", "#ddd");
                    }
                 },
            },
            mounted: function() {
                $(".login-code-img").attr("src", "{ms:global.host/}/code?t=" + (new Date).getTime())
            }
        })
    </script>
</html>